<template>
	<view class="pages">
		<view class="operateBox">
			<view class="header_bar header_main">
				<view class="header">
					<view class="header-goBack" @click="$tools.back(1)"></view>
					<view class="header-title">{{ addrType == 'user_address_add' ? '添加收货地址' : '编辑收货地址' }}</view>
				</view>
			</view> 
			<view class="operateBox-tabs">
				<view class="operateBox-formBox">
					<view class="operateBox-block">
						<view class="operateBox-formBox-list-header">姓名</view>
						<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 0, showCloseBtn: name != '' }">
							<input type="text" placeholder="请输入收货人姓名" v-model="name" placeholder-class="inputStyle"
							@blur="blurInput(0)"
							@focus="focusInput(0)"/>
							<view class="operateBox-formBox-list-image">
								<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('name')">
									<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="operateBox-block operateBox-flex--noBorder">
						<view class="operateBox-formBox-list-header">手机号码</view>
						<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 1, showCloseBtn: phone != '' }">
							<input type="number" placeholder="请输入收货人手机号码" placeholder-class="inputStyle" v-model="phone"
							@blur="blurInput(1)"
							@focus="focusInput(1)"/>
							<view class="operateBox-formBox-list-image">
								<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('phone')">
									<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="operateBox-formBox">
					<!-- <view class="operateBox-flex operateBox-flex--mt">
						<view class="operateBox-formBox-list-header">所在地区</view>
						<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 2, showCloseBtn: address != '' }">
							<input placeholder="请选择地区,例：" placeholder-class="inputStyle" v-model="address" 
							disabled="disabled"
							@click="regionVisible = true" 
							type="text"
							@blur="blurInput(2)"
							@focus="focusInput(2)"/>
							<view class="operateBox-formBox-list-image">
								<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('address')">
									<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
								</view>
								<view class="operateBox-formBox-list-image__see">
									<image src="../../static/user/next.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view> -->
					<view class="operateBox-block operateBox-flex--mt">
						<view class="operateBox-formBox-list-header">所在地区</view>
						<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 2, showCloseBtn: address != '' }">
							<view class="regionBox" @click="resgclick">
								{{ this.address ?this.address :'请选择' }}
								<!-- <u-region @region="resgclick" :regionStr="address" /> -->
							</view>
							<view class="operateBox-formBox-list-image">
								<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="getOperate()">
									<image  src="../../static/public/icon-clear.png" mode="widthFix"></image>
								</view>
								<view class="operateBox-formBox-list-image__see">
									<image class="ico" src="../../static/public/addr-1.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="operateBox-block operateBox-flex--noBorder operateBox-flex--textarea">
						<view class="operateBox-formBox-list-header">详细地址</view>
						<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 3, showCloseBtn: details != '' }">
							<textarea placeholder="请填写详细的收货地址，如街道、小区名称、楼道号等。" placeholder-class="inputStyle" v-model="details" cols="30" rows="10" 
							@blur="blurInput(3)"
							@focus="focusInput(3)"/></textarea>
							<view class="operateBox-formBox-list-image">
								<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('details')">
									<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
								</view>
								<!-- <view class="operateBox-formBox-list-image__see" @click="toggleEyeStatus(2)">
									<image :src="eyeShowHideArray[2].show ? eyeShow : eyeHide" mode="widthFix"></image>
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="operateBox-bottom" @tap="checkActive()">
				<image class="ico" v-if="active == 1" src="../../static/public/check-active.png" mode=""></image>
				<image class="ico" v-else src="../../static/public/check.png" mode=""></image>
				<view class="mo">设为默认地址</view>
			</view>
			
			<view class="initBtn" @tap.stop="$u.throttle(confirm,1000)">添加</view>
			
		</view>
		<simple-address v-if="showAddress" :show="showAddress"/>
		
		<!-- 城市选择模态框 -->
		<w-picker
			:visible.sync="showAddress"
			mode="region"
			:value="defaultRegion"
			default-type="value"
			:hide-area="false"
			@confirm="onConfirm($event, 'region')"
			ref="region"
		></w-picker>	
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault"
						@onConfirm="onConfirm" themeColor='#007AFF'></simple-address>

	</view>
</template>

<script>
	import vPicker from '@/components/w-picker/w-picker.vue';
	import uRegion from '@/components/u-region/u-region.vue'
	import simpleAddress from '@/components/simple-address/simple-address.vue'

	export default {
		components: { vPicker,uRegion,simpleAddress },
		options: {
		  styleIsolation: 'shared',
		},
		data() {
			return {
				active: 0,
				phone: '',
				name: '',
				address: '',
				details: '',
				invite: '', 
				addressId:'',
				pickerShow: false,
				selectType:0,
				title: 'picker',
				isActive : true,
				isFocus: null,
				eyeShow: '../../static/public/icon-eye-open.png',
				eyeHide: '../../static/public/icon-eye-close.png',
				eyeShowHideArray: [{ show: false }, { show: false }, { show: false }],
				defaultFlag: '',
				defaultAddress: 0,
				addressType:false,
				regionVisible: false,
				defaultRegion: ['440000', '440300', '440307'],
				addrType: '',
				id: '',
				addrAll: '',
				sendaddress: '',
				toggle: true,
				// isRevise: false,
				itemObj: {},
				showAddress:false,
				cityPickerValueDefault: [0, 0, 1]
			}
		},
		onLoad(options) {
			this.addrType = options.value1;
			if(options.value2){
				this.itemObj = JSON.parse(decodeURIComponent(options.value2));
				console.log("this.itemObj:",this.itemObj);
				if(this.itemObj){
					this.id = this.itemObj.id;
					this.name = this.itemObj.consignee;
					this.phone = this.itemObj.phone;
					this.active = this.itemObj.remark;
					this.addrAll = this.itemObj.address;
					// this.province = this.itemObj.address.split('·')[0];
					// this.city = this.itemObj.address.split('·')[1];
					// this.area = this.itemObj.address.split('·')[2];
					this.province = this.itemObj.province;
					this.city = this.itemObj.city;
					this.area = this.itemObj.area;
					if(this.itemObj.address.split('·').length == 5){
						var addr = this.itemObj.address.split('·')[0]+this.itemObj.address.split('·')[1]+this.itemObj.address.split('·')[2]+this.itemObj.address.split('·')[3];
					}else{
						var addr = this.itemObj.address.split('·')[0]+this.itemObj.address.split('·')[1]+this.itemObj.address.split('·')[2];
					}
					// this.address = addr;
					this.address = this.province + '·' + this.city + '·' + this.area  ;
					this.address = this.address.replaceAll('·','');
					this.sendaddress = this.province + '·' + this.city + '·' + this.area + '·' + this.itemObj.address.split('·')[3];
					// this.address = this.itemObj.address.replaceAll('·','');
					this.details = this.itemObj.address.split('·')[this.itemObj.address.split('·').length-1];
					console.log("address：",this.address);
					console.log("address：",this.itemObj.address.split('·')[this.itemObj.address.split('·').length-1],this.itemObj.address.split('·').length);
				}
			}
		},
		onShow() {
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			getOperate(){
				this.clearData('address');
				// this.isRevise = false;
			},
			resgclick(){
				// this.showAddress = true
				this.$refs.simpleAddress.open();
			},
			resgclick1(ele) {
				console.log(ele, '选择的城市'); // join()
				let val = ele.join();
				console.log(val, 'val')
				// this.sendaddress = val.replaceAll(',','·');
				// this.address = val.replaceAll(',','');
				this.sendaddress = val.replace(/,/g,'·');
				this.address = val.replace(/,/g,'');
				this.province = ele[0]
				this.city = ele[1]
				this.area = ele[3]?ele[2]+ele[3]:ele[2]

				console.log("address：",this.address);
				console.log("province",this.province,',city',this.city,',area',this.area);

				// ele.forEach(item => [
				// 	this.addr += item
				// ])
				// console.log(this.addr);
			},
			// 新增地址
			confirm(){
				if (this.name == ''){
					return this.$tools.toast("请输入收货人姓名");
				}
				if (this.phone == '' ) {
					return this.$tools.toast("请输入收货人手机号码");
				}
				var reg = /^1[3456789]\d{9}$/;
				if(!reg.test(this.phone)){
					return this.$tools.toast("请输入正确的收货人手机号码");
				}
				if (this.address == '' ) {
					return this.$tools.toast("请选择地区");
				}
				if (this.details == ''){
					return this.$tools.toast("请填写详细的收货地址，如街道、小区名称、楼道号等详细地址。");
				}
				if(this.toggle){
					this.toggle = false;
					var data = {};
					data['consignee'] = this.name;
					data['phone'] = this.phone;
					data['address'] = this.province+'·'+this.city+'·'+this.area+'·'+this.details;
					// data['address'] = this.sendaddress+'·'+this.details;
					data['province'] = this.province;
					data['city'] = this.city;
					data['area'] = this.area;
					data['remark'] = this.active;
					if(this.addrType == 'user_address_edit'){
						var url = '/api/address/updAddress';
						data['id'] = this.id;
					}else{
						var url = '/api/address/saveAddress';
					}
					console.log("data：",data);
					this.$Ajax(url,
					data,
					res => {
							this.toggle = true;
							if (res.code == 200) {
								this.$tools.toastBack((this.addrType == 'user_address_add' ? "添加地址成功" : "修改地址成功"),1);
							} else {
								this.$tools.toast(res.msg);
							}
						}
					),err =>{
						this.toggle = true;
					}
				}
			},
			onConfirm(res){
				console.log(res);
				this.address = res.label;
				this.sendaddress = res.label;
				let val = res.label.split('·');
				this.province = val[0]
				this.city = val[1]
				this.area = val[3]?val[2]+val[3]:val[2]
				console.log(val, 'val',this.province,this.city,this.area)
			},
			onConfirm1(res) {
				this.result = res;
				this.province = this.result.obj.province.label;
				this.city = this.result.obj.city.label;
				this.area = this.result.obj.area.label;
				this.address = this.result.result;
				this.sendaddress = this.result.result;
				console.log(res);
			},
			checkActive(){
				if(this.active == 0){
					this.active = 1;
				}else{
					this.active = 0;
				}
				console.log("active:",this.active);
			},
			/* clear & eye */
			focusInput(index) {
				this.isFocus = index;
			},
			blurInput(index) {
				this.isFocus = null;
			},
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
			toggleEyeStatus(index) {
				this.eyeShowHideArray[index].show = !this.eyeShowHideArray[index].show;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/scss/pages/operate/address';
	page,.pages{
		background: #fff;
	}
	.address{
		&-r{
			background: #fff;
			border-radius: 20rpx;
			@include flexBetween;
			padding: 40rpx 30rpx;
			margin: 0 30rpx;
			image{
				width: 34rpx;
				height: 34rpx;
			}
			.mo{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #131414;
				margin-left: 16rpx;
			}
		}
	}
	.operateBox-formBox-list-header{
		overflow: hidden;
	}
	
	.regionBox{
		flex: 1;
		min-height: 40rpx;
	}
	
	.initBtn{
		width: 92%;
		margin: 204rpx auto 0;
	}
	
</style>
